<template>
    <div class="captcha_box">
        <div>
            <van-nav-bar title="" left-text="" right-text="" left-arrow @click-left="back" />
        </div>

        <van-cell class="text" :border="false" center title="设置新邮箱"  />


        <div class="inputBox">
          <van-form validate-first @submit="onSubmit">
            <!-- 通过 pattern 进行正则校验 -->
            <van-field v-model="email" name="pattern" center clearable label="电子邮箱" placeholder="请输入电子邮箱" 
            :rules="[{ pattern, message: '邮箱格式错误！' }]"
            @input="onEmailChange" >
            </van-field>

            <van-field v-model="sms" name="验证码" center clearable label="验证码" placeholder="请输入验证码">
                <template #button>
                    <van-button round plain color="#ff6357" size="small" type="primary" @click.prevent="sendSmsCode" :disabled="isSmsSend">{{ sendBtnText }}</van-button>
                </template>
            </van-field>

            <div class="btn">
                <van-button round type="info" native-type="submit" color="#ff7b57"  size="large">确定</van-button>
            </div>
          </van-form>
        </div>

        <div class="tishi" v-show="tishishow">
          已向 {{email}} 发送验证码
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
import { Toast } from 'vant';
Vue.use(Toast);

import { mapMutations } from "vuex";

export default {
    name: "ChangeMail2",
    data(){
        return{
            email:"",
            sms:"",
            pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/,   //邮箱正则验证
            tishishow:false,
           // 是否已经发送了验证码
          isSmsSend: false,
          sendBtnText: '点击发送验证码',
          timer: null,
          counter: 60

        }
    },
    methods:{
        back() {
            this.$router.go(-1)
        },
        // 点击确定按钮
        ...mapMutations(['setEmail']),

        onSubmit(values) {
          if (this.sms) {
            console.log(this.email,this.sms);
            console.log('submit', values);
            this.setEmail(this.email)
            let that=this
            Toast({
              message:'设置成功',
              duration:1000,
              onClose() {
                  that.$router.push({ path:'/accounts'})  //这样用this将会指向toast  ，所以用that替代this将指向onSubmit
              }
            })
          }else{
            Toast('请输入验证码');
          }
        },
                        /**
         * 重置倒计时
         */
         reset () {
            this.tishishow=false

          this.isSmsSend = false
          this.sendBtnText = '点击发送验证码'
          if (this.timer) {
            clearInterval(this.timer)
            this.counter = 60
            this.timer = null
          }
        },
        /**
         * 倒计时
         */
        countDown () {
          this.timer = setInterval(() => {
            this.sendBtnText = `重新获取${this.counter}秒`
            this.counter--
            if (this.counter < 0) {
              this.reset()
            }
          }, 1000)
        },
                /**
         * 发送验证码按钮
         */
         sendSmsCode () {
          // 判断邮箱是否符合正则
          if(this.pattern.test(this.email)){
            // 调用接口，发送短信验证码
            this.isSmsSend = true
            //   提示展示出来
                this.tishishow=true
              // 开始倒计时，60s之后才能再次点击
              this.countDown()
            }else{
              Toast('请输入正确邮箱号')
            }
          },
           // 当邮箱变化时，重置发送按钮
          onEmailChange () {
              this.tishishow=false
            this.reset()
          }

          
    }
}
</script>

<style scoped>
        .text{
        font-size: 24px;
    }
    .btn{
    width: 92%;
    margin: 50px auto ;
    }
    .inputBox{
        margin-top: 50px;
    }
    .tishi{
        width: 92%;
        margin: auto;
        text-align: center;
        font-size: 14px;
        color:#5e5e5e;
    }





</style>
